<template>
  <div class="container">
      <!-- 查询 -->
      <div class="search">
      <span class="name">名称：</span>
      <el-input clearable v-model="searchName" placeholder="请输入" class="width"/>
      <span class="name">状态：</span>
      <el-select clearable v-model="searchStatus" placeholder="请选择状态" class="width">
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- <span class="name">时间：</span>
      <date-range-picker v-model="searchTime" class="date"/> -->
      <el-button type="success" size="mini" icon="el-icon-search" @click="clickSearch">搜索</el-button>
      <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="clickReset">重置</el-button>
      </div>

   <!-- 列表 -->
   <div class="list" style="background-color: #fff;">
    <el-button type="primary" class="moreBack" icon="el-icon-refresh-right"  @click="onMoreBack">批量归还</el-button>
    <el-table  @selection-change="handleSelectionChange" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"  :selectable="onSelectable"/>
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="applyNum" label="领用量/归还量" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.unit=='mL'||scope.row.unit=='g'">{{ scope.row.applyNum }} 瓶</span>
          <span v-else>{{ scope.row.applyNum }} {{ scope.row.unit }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status==6" style="color: #909299;">已归还</span>
          <span v-if="scope.row.status==5" style="color: orange;">待归还</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status==6"
            class="btnWidth"
            type="danger"
            size="mini"
            @click="onDelReturn(scope.row.id)"
          >删除</el-button>
          <el-button
            v-if="scope.row.status==5"
            class="btnWidth"
            type="warning"
            size="mini"
            @click="onBack(scope.row)"
          >归还</el-button>
        </template>
      </el-table-column>
    </el-table>
   </div>

      <!-- 分页 -->
      <pagination :currentPage="currentPage" :total="total" @changCurrentPage="changCurrentPage" />
      <!-- 归还弹框 -->
      <backDialog v-if="showback" :showback="showback" @backSuccess="backSuccess" :backList="backSelectionList" @close="showback=false"/>
  </div>
</template>

<script>
import DateRangePicker from "@/components/DateRangePicker";
import pagination from '../components/pagination.vue'
import backDialog from "../receiveRecord/components/backDialog.vue";
import { returnListAPI,returnDelAPI } from '@/api/web/hjUser.js'
export default {
  components:{
    DateRangePicker,
    pagination,
    backDialog
  },
  data () {
    return {
      showback:false,
      searchTime:'',
      searchName:'',
      searchStatus:'',
      selection:[],// 选中要归还的
      backSelectionList:[],
      tableData:[],
      total:0,
      currentPage:1,
      statusOptions:[
        {
          value: 5,
          label: '待归还'
        },
        {
          value: 6,
          label: '已归还'
        },
      ]
    }
  },

  created () {
   this.returnList()
  },

  methods: {
    async returnList(status,name,page=0){
      let params={}
      if(status&&name){
        params={status,name}
      }else if(status &&!name){
        params={status}
      }else if(!status && name){
        params={name}
      }else {
        params={}
      }
      const {content,totalElements}  = await returnListAPI(params,page)
      this.tableData =content
      this.total = totalElements
    },
    clickSearch(){
      this.returnList(this.searchStatus,this.searchName)
    },
    clickReset(){
       this.searchStatus =''
       this.searchName =''
       this.returnList()
    },
    changCurrentPage(page) {
      this.currentPage = page
      this.returnList(this.searchStatus,this.searchName, page-1)
    },
    handleSelectionChange(selection){
       this.selection = selection;
    },
    onBack(row){
      const data = JSON.parse(JSON.stringify(row))
      this.showback = true
      this.backSelectionList=[data]
    },
    onSelectable(row){
      if(row.status == 5) {
        return true
      }else {
        return false
      }
    },
    onMoreBack(){
      if(this.selection.length == 0) return this.$message.error('请选择要归还的物品')
      this.backSelectionList =  this.selection
      this.showback = true
    },
    backSuccess(){
      this.returnList()
      this.currentPage = 1
      this.showback = false
    },
    async onDelReturn(id){
      await returnDelAPI([id])
      this.$message.success('删除成功')
      this.returnList()
      this.currentPage = 1
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/views/website/style/hjUserSearch.scss';
.moreBack {
  margin: 15px 0 8px 15px;
  height: 40px;
  font-size: 16px;
  padding: 9px 15px;
}
.list ::v-deep {
  .btnWidth {
    height: 35px;
    font-size: 16px;
    width: 65px;
    padding: 9px 15px;
  }
  &.el-table {
    font-size: 16px;
    .el-table__cell {
      padding: 17px 0;
    }
    .el-table--small{
    font-size: 16px;
  }

  }
}
  .el-pagination.is-background .btn-prev,
 .el-pagination.is-background .btn-next,
 .el-pagination.is-background .el-pager li,
 .el-pagination__total {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.el-pagination__total {
  width: unset;
}

</style>
